<template>
	<view class="content">
		<u-navbar :is-back="true">
			<view class="slot-wrap">
				<u-search placeholder="请输入关键字" shape="round" v-model="keyword"
				  :animation="false"  @custom="search" @search="search">
				</u-search>
			</view>
		</u-navbar>
		
		<view class="one">
			<view class="one_one u-flex">
				<view>最近搜索</view>
				<image src="/static/delete.png" mode=""></image>
			</view>
			<view class="one_two u-flex">
				<view class="one_two_1">
					四件套
				</view>
				<view class="one_two_1">
					四件套
				</view>
			</view>
		</view>
		
		<view class="one" id="one">
			<view class="one_one">
				<view>热门搜索</view>
			</view>
			<view class="one_two u-flex">
				<view class="one_two_1">
					四件套
				</view>
				<view class="one_two_1">
					四件套
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				keyword:"",
			}
		},
		methods:{
			search(keyword){
				console.log(keyword);
				uni.navigateTo({
					url:'/pages/search_list/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice-bar {
		padding-top: 10rpx;
		text-align: center;
	}
	.slot-wrap{
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
		u-search{
			// width: 360rpx;
			margin-left: 60rpx;
		}
	}
	.navbar_msg {
		image {
			width: 52rpx;
			height: 52rpx;
			padding-left: 40rpx;
			padding-right: 20rpx;
		}
	}
	.navbar_sys {
		image {
			width: 54rpx;
			height: 52rpx;
			padding-left: 20rpx;
		}
	}
	#one{
		margin-top: 40rpx;
	}
	.one{
		width: 100%;
		// background-color: red;
		.one_one{
			padding: 20rpx;
			view{
				font-size: 30rpx;
				font-weight: bold;
			}
			image{
				width: 38rpx;
				height: 38rpx;
				margin-left: 560rpx;
			}
		}
		.one_two{
			// background-color: blue;
			display: flex;
			width: 100%;
			.one_two_1{
				text-align: center;
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color:#f2f2f2;
				border-radius: 40rpx;
				margin: 20rpx;
				flex-wrap: wrap;
			}
		}
	}
</style>
